<!-- 视频播放器 webrtc -->
<template>
	<div class="videoBox">
		<div class="text">回放</div>
		<video ref="rtcVideo" autoplay controls muted></video>
	</div>
</template>

<script lang="ts" setup name="video-webrtc">
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
import { getUrl } from '/@/utils/hm';
import { smokeStore } from '/@/stores/smoke';
import { useUserInfo } from '/@/stores/userInfo';
import axios from 'axios';

const props = defineProps({
	deviceCode: {
		type: String,
		default: '',
	},
});

defineExpose({
	wsGetVideo,
	startVideo,
});

const viewTypeMap: any = {
	live: '实时1',
	review: '回看1',
};

let continueTimer: any = null;
let wsConn = smokeStore().wsConn;
const rtcVideo = ref();
const { webrtcUrl, playUrl, pushUrl } = getVideoUrl();

// 查看视频
function wsGetVideo(startTime:number) {
	console.log();
	
	let params = {
		cmdType: 'getPlaybackVideo',
		deviceCode: props.deviceCode,
		data: {
			url: pushUrl,
			startTime: startTime,
		},
	};
	wsConn.send(JSON.stringify(params));
	console.log({ webrtcUrl, playUrl, pushUrl });
	startVideo(rtcVideo, playUrl);
}

// wsGetVideo();

let pc = null;
async function startVideo(videoDom: any, sourceAddr: string) {
	console.log('直播开始：', sourceAddr);
	const pc = new RTCPeerConnection({});
	pc.addTransceiver('video', { direction: 'recvonly' });
	pc.addTransceiver('audio', { direction: 'recvonly' });
	pc.ontrack = ({ streams }) => {
		videoDom.value.srcObject = streams[0];
	};

	// 发送RTC请求
	const offer = await pc.createOffer({
		offerToReceiveVideo: true,
		offerToReceiveAudio: true,
		iceRestart: true,
	});

	// 设置自身和远程的SDP(媒体协商信息)
	// const reg = /webrtc:\/\/((\d*).(\d+).(\d+).(\d+)(:\d+)?)\//;
	// const signalServerIp = reg.exec(sourceAddr)[1];

	await pc.setLocalDescription(offer);
	// 将SDP数据通过信令服务器进行中转，数据格式：https://github.com/rtcdn/rtcdn-draft

	const { data: resp } = await axios({
		method: 'post',
		// url: `http://${signalServerIp}:1985/rtc/v1/play/`,
		url: `${location.protocol}//${webrtcUrl}:1985/rtc/v1/play/`,
		data: {
			streamurl: sourceAddr,
			sdp: offer.sdp,
		},
	});
	await pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: resp.sdp }));
}

function wsCloseVideo() {
	let wsConn = smokeStore().wsConn;
	let params = {
		cmdType: 'closeVideo',
		deviceCode: props.deviceCode,
		data: {
			url: pushUrl,
		},
	};
	wsConn.send(JSON.stringify(params));
}

onBeforeUnmount(() => {
	wsCloseVideo();
});

// 视频续时
function wsContinueDevice() {
	let params = {
		cmdType: 'getVideo',
		deviceCode: props.deviceCode,
		data: null,
	};
	wsConn.send(JSON.stringify(params));
}

// 获取RTMP播放地址
function getVideoUrl() {
	let webrtcUrl = getUrl('webrtcUrl');
	let uid = useUserInfo().userInfos.id;

	let playUrl = `webrtc://${webrtcUrl}/review/${props.deviceCode}_${uid}`;
	let pushUrl = `rtmp://${webrtcUrl}:1984/review/${props.deviceCode}_${uid}`;

	return {
		webrtcUrl,
		playUrl,
		pushUrl,
	};
}
</script>

<style lang="scss" scoped>
.videoBox {
	position: relative;

	.text {
		position: absolute;
		right: 10px;
		top: 10px;
		padding: 5px 10px;
		border-radius: 3px;
		color: #f8b900;
		// background-color: #67c23a;
		border: 1px solid #f8b900;
		font-size: 12px;
	}

	video {
		width: 100%;
		aspect-ratio: 16/9;
		background-color: #333333;
	}
}
</style>
